/*!
 * Prince - v1.0.0
 * @author AtriTheme
 * Copyright (c) 2018
 */
@import '../../../../sass/global/css/variables';
@import '../../../../sass/global/css/mixin';

/*==============================

START lockscreen V2

================================*/
.lockscreen-background {
  background-image: url("../../../../assets/pages/lockscreen/images/lockscreen_2.jpeg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  height: 100%;
  opacity: 0.8;
  overflow: auto;
  position: $position-fixed;
  width: 100%;
  &:before {
    background: rgba(0, 0, 0, 0.6);
    position: $position-fixed;
    z-index: 0;
    width: 100%;
    height: 100%;
    content: "";
  }
  .lockscreen-page {
    display: table;
    height: 100%;
    float: $right-division;
    min-width: 400px;
    position: $position-relative;
    background: $white-backgournd-color;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
    a {
      &:hover {
        text-decoration: none;
      }
    }
  }
  .main-lockscreen-contain {
    display: table-cell;
    vertical-align: middle;
  }
  .lockscreen-image{
    text-align: $text-center;
    img{
      width: 80px;
      border-radius: $border-radius-circle;
    }
  }
  .lockscreen-form {
    padding: $gaping-50;
    h4 {
      font-size: 20px;
      margin-bottom: $gaping-5;
      text-transform: $text-uppercase;
      font-weight: $bold-text;
    }
    .lockscreen-title-text {
      font-size: 12px;
      margin-bottom: $gaping-30;
    }
  }
  .btn-lockscreen {
    width: 130px;
    float: $right-division;
    color: $white-text-color;
    background-color: $main-site-color;
    border-color: $main-site-color;
    &:hover, &:focus {
      width: 130px;
      float: $right-division;
      color: $white-text-color;
      background-color: $main-site-color;
      border-color: $main-site-color;
    }
  }
  .forgot-password-lockscreen {
    float: $left-division;
  }
  .lockscreen-form-border {
    background: transparent;
    &:focus {
      background-color: transparent;
      border-color: $white-text-color;
    }
  }
  .goto-lockscreen {
    width: 100%;
    display: table;
    margin-top: $gaping-15;
    font-size: 16px;
    a {
      color: $main-site-color;
      cursor: $text-link;
      line-height: $gaping-35;
      &:hover {
        color: $main-site-color;
      }
    }
  }
  .lockscreen-bottom-text {
    margin-top: $gaping-20;
    p {
      float: $left-division;
    }
    a {
      float: $right-division;
      color: $main-site-color;
    }
  }
  .lockscreen-left-section {
    position: $position-absolute;
    width: 700px;
    padding: $gaping-50;
    color: $white-text-color;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .lockscreen-page {
    .form-group {
      position: $position-relative;
      margin: $gaping-25 $gaping-0;
      text-align: $text-left;
      input {
        display: block;
        background: none;
        padding: 2px 2px 1px;
        font-size: 14px;
        border-width: 0;
        border-color: transparent;
        line-height: 1.9;
        width: 100%;
        color: transparent;
        @include transition(all 0.28s ease);
        box-shadow: none;
        height: $gaping-25;
        &:focus {
          outline: none;
          ~ .bar::before {
            width: 100%;
            left: 0;
          }
        }
        &:focus, &:valid, &.form-file, &.has-value {
          color: $main-site-color;
        }
        &:focus ~ .control-label, &:valid ~ .control-label, &.form-file ~ .control-label, &.has-value ~ .control-label {
          font-size: 12px;
          color: $main-site-color;
          top: -15px;
          left: 0;
        }
      }
      .control-label {
        position: $position-absolute;
        top: 4px;
        pointer-events: none;
        padding-left: 2px;
        z-index: 1;
        color: $scroll-backgorund-color;
        font-size: 14px;
        font-weight: $normal-text;
        @include transition(all 0.28s ease);
      }
      .bar {
        position: $position-relative;
        border-bottom: 1px solid $main-site-color;
        display: block;
        &:before {
          content: '';
          height: 2px;
          width: 0;
          left: 50%;
          position: $position-absolute;
          background: $main-site-color;
          transition: left 0.28s ease, width 0.28s ease;
          z-index: 2;
        }
      }
    }
  }
  .social-media-section {
    position: $position-absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: $gaping-5 $gaping-50;
    text-align: $text-center;
    background: $white-backgournd-color;
    .social-hexagon {
      width: $gaping-40;
      height: $gaping-25;
      background: #5F6062;
      position: $position-relative;
      top: 0;
      text-align: $text-center;
      @include transition(all 0.3s ease-in-out);
      display: inline-block;
      &:before {
        content: "";
        position: $position-absolute;
        top: -9px;
        left: 0;
        width: 0;
        height: 0;
        border-left: $gaping-20 solid transparent;
        border-right: $gaping-20 solid transparent;
        border-bottom: $gaping-10 solid #5F6062;
        @include transition(all 0.3s ease-in-out);
      }
      &:after {
        content: "";
        position: $position-absolute;
        bottom: -9px;
        left: 0;
        width: 0;
        height: 0;
        border-left: $gaping-20 solid transparent;
        border-right: $gaping-20 solid transparent;
        border-top: $gaping-10 solid #5F6062;
        @include transition(all 0.3s ease-in-out);
      }
      &:hover {
        background: $main-site-color;
        cursor: $text-link;
        &:after {
          border-top: $gaping-10 solid $main-site-color;
        }
        &:before {
          border-bottom: $gaping-10 solid $main-site-color;
        }
      }
      i {
        color: $white-text-color;
        font-size: 15px;
        line-height: $gaping-25;
        text-shadow: 2px 2px 10px black;
      }
    }
  }
  .btn {
    &.float-button-light {
      &.waves-button {
        box-shadow: none;
        white-space: normal;
        border-radius: $border-radius-0;
        padding: $gaping-10;
      }
    }
  }
}

/*---- START RESPONSIVE ----*/

@media (max-width: 1199px) {
  .lockscreen-background {
    .lockscreen-left-section {
      width: 600px;
      padding: $gaping-40;
    }

    .lockscreen-page {
      min-width: 390px;
    }
  }
}

@media (max-width: 991px) {
  .lockscreen-background {
    .lockscreen-left-section {
      width: 400px;
      padding: $gaping-30;
    }
  }
}

@media (max-width: 767px) {
  .lockscreen-background {
    .lockscreen-left-section {
      display: none;
    }
    .goto-lockscreen{
      margin-bottom: $gaping-40;
    }
    .lockscreen-page {
      background: rgba(255, 255, 255, 0.7);
    }
    .social-media-section {
      background: transparent;
      position: $position-relative;
      margin: $gaping-0;
    }
    .lockscreen-form {
      padding: $gaping-15 $gaping-50;
    }
  }
}

@media (max-width: 479px) {
  .lockscreen-background {
    .lockscreen-page {
      max-width: 480px;
      min-width: 100%;
    }

    &:before {
      background: rgba(0, 0, 0, 0.1);
    }

    .lockscreen-form {
      padding: $gaping-20;
    }

    .btn-lockscreen, .btn-lockscreen:hover, .btn-lockscreen:focus {
      width: $gaping-90;
    }

    .goto-lockscreen {
      margin: $gaping-20 $gaping-0;
    }

    .lockscreen-form .lockscreen-title-text {
      margin-bottom: $gaping-20;
    }
    .lockscreen-form h4 {
      font-size: 18px;
    }
  }
}

/*---- END RESPONSIVE ----*/

/*==============================

END lockscreen V2

================================*/